<template>
  <div style="line-height: normal">
    <!-- 头部 -->
    <el-row class="tool-bar">
      <el-col :span="6">
        <!-- 如果在一个组件上自定义类名的话，编译之后他会给最外层的标签也添加上对应的类名 -->
        <el-input
          class="tool-input"
          v-model.trim="name"
          clearable
          placeholder="请输入内容"
        ></el-input>
      </el-col>

      <el-col :span="2" class="btns">
        <el-button type="primary" @click="HandleQuery">搜索</el-button>
      </el-col>
      <el-col :span="2" class="btns">
        <el-button type="primary" @click="HandleAdd">新增</el-button>
      </el-col>
    </el-row>

    <!-- 表格部分 -->
    <!-- data 表示表格数据 -->
    <!-- v-loading 该指令表示加载时候的样式 -->
    <el-table
      border
      align="center"
      v-loading="isLoading"
      ref="multipleTable"
      :data="DataList"
      style="width: 100%"
      :height="getHeight()"
      @selection-change="HandleSelect"
      @select-all="HandleSelect"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="#" width="80"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="sex" label="性别" width="120">
        <!-- 此处需要判断性别 -->
        <template slot-scope="scope">
          {{ scope.row.sex ? "女" : "男" }}
        </template>
      </el-table-column>
      <!-- 年龄 -->
      <el-table-column prop="age" label="年龄" width="120"></el-table-column>
      <!-- 生日 -->
      <el-table-column
        prop="birthday"
        label="生日"
        width="120"
      ></el-table-column>
      <!-- 地址 -->
      <el-table-column
        prop="address"
        label="地址"
        width="120"
      ></el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <!-- scope.$index 表示当前操作的这一行的索引值 -->
          <!-- scope.row 表示当前操作的这一行的数据-->
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 批量删除 -->
    <el-row class="footer">
      <el-col :span="2" align="right">
        <el-button
          type="danger"
          size="small"
          @click="HandleBatchDel"
          :disabled="isBatchDel"
          >批量删除</el-button
        >
      </el-col>

      <!-- 分页效果 -->
      <el-col :span="9" align="right">
        <!-- total总条目数 -->
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          @current-change="HandlePageChange"
        ></el-pagination>
      </el-col>
    </el-row>

    <!-- 新增和编辑的组件，放到这里 -->
    <UserAdd v-if="showAdd" @close="HandleAddClose"></UserAdd>
    <UserEdit
      v-if="showEdit"
      :item="currentUser"
      @close="HandleEditClose"
    ></UserEdit>
  </div>
</template>

<script>
import UserAdd from "./UserAdd.vue"; //添加用户
import UserEdit from "./UserEdit.vue"; //编辑

export default {
  data() {
    return {
      name: "", // 搜索输入框的内容
      DataList: [], //表格数据
      isLoading: false, //表示表格的加载效果,当我们向服务器端发起ajax请求的时候需要这个效果
      total: 0, //总的记录数
      isBatchDel: true, //批量删除按钮是否可点击 默认true禁选
      pageno: 1, //第几页
      pagesize: 10, //每页显示多少条数据
      showAdd: false, //是否显示添加用户的组件
      showEdit: false, //是否显示修改(编辑)用户的组件
      currentUser: {}, //点击编辑用户的时候，所编辑的当前用户信息
    };
  },
  //  组件挂载完成之后调用请求数据的方法。
  mounted() {
    this.getUserList();
  },
  methods: {
    // 发起网络请求
    async getUserList() {
      this.isLoading = true; //发起请求时候显示加载样式
      let res = await this.$http.post("/api/user/list", {
        name: this.name,
        pageno: this.pageno,
        pagesize: this.pagesize,
      });
      console.log(res);
      this.DataList = res.data.list; //把服务器拿到的数据赋值给表格的数组
      this.total = res.data.total; //服务器响应回来的总条目
      this.isLoading = false;
    },
    HandleQuery() {
      this.getUserList();
    },
    // 实现翻页功能
    HandlePageChange(val) {
      //val 表示当前是第几页
      this.pageno = val; //把当前用户点击的页码 赋值给当前是第几页的变量即可
      this.getUserList(); //再次向服务器请求当页数据即可
    },

    getHeight() {
      return window.innerHeight - 260;
    },
    // 删除
    handleDelete(index, row) {
      // row表示当前操作的行的数据
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          //如果点击的是确定的按钮
          console.log(row);
          let id = row.id; //找到当前行的id
          let res = await this.$http.get("/api/user/del", { params: { id } });
          if (res.data.code === 1) {
            // 删除成功了
            this.$message({
              type: "success",
              message: "删除成功",
            });
            // 删除成功之后，需要重新获取新的数据列表
            this.getUserList(); //
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 当用户点击当前选项或者全选的时候触发事件
    HandleSelect(select) {
      //该形参表示当前选中的用户
      this.selectList = []; //收集一下用户选中的数据
      select.forEach((item) => {
        this.selectList.push(item.id);
      });
      // 批量删除是否可以点击
      this.isBatchDel = false; //false可以点击批量删除
    },

    // 批量删除
    HandleBatchDel() {
      // row表示当前操作的行的数据
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          //如果点击的是确定的按钮
          let res = await this.$http.post("/api/user/batchdel", {
            ids: this.selectList, //用户选中的所有数据的id
          });
          if (res.data.code === 1) {
            // 删除成功了
            this.$message({
              type: "success",
              message: "删除成功",
            });

            // 还需要把selectList数组清空一下，否则批量删除按钮会一直显示
            this.selectList = [];
            // 删除成功之后，需要重新获取新的数据列表
            this.getUserList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 当点击新增的事件时候
    HandleAdd() {
      this.showAdd = true;
    },
    // 添加用户的回调
    HandleAddClose(msg) {
      // 发射过来的数据 success msg形参接收数据
      this.showAdd = false;
      if (msg === "success") {
        // 消息提示框
        this.$message.success("添加用户成功");
        // 重新加载数据
        this.getUserList(); //重新调用 获取新数据
      }
    },

    // 编辑
    handleEdit(index, row) {
      //row 表示当前行的数据
      this.showEdit = true; //显示编辑弹出框
      this.currentUser = row; //当前行的数据放到这个对象里面传递给子组件，回显出来
    },

    // 编辑之后的回调函数
    HandleEditClose(msg) {
      this.showEdit = false;
      if (msg == 'success') {
        this.$message.success("修改成功");
        this.getUserList(); //重新加载数据
      }
    },
  },

  //   渲染子组件
  components: {
    UserAdd,
    UserEdit,
  },
};
</script>

<style scoped>
/* el-row 行上面的 */
.tool-bar {
  margin: 10px auto;
  line-height: normal;
}

.btns {
  width: 120px;
  /* border: solid 1px red; */
  margin-left: 10px;
}
</style>
